<template>
	<view class="container">
		<view class="detail">
			<view class="swiper-main">
				<swiper
					class="swiper-box"
					:autoplay="autoplay"
					:style="'height:' + imgHeights[imgCurrent] + 'rpx'"
					:duration="1000"
					:circular="true"
					@change="_bindChange"
				>
					<!-- <swiper-item v-for="(dataItem, index) in dataInfo.detailImageList" :key="index" class="swiper_item"> -->
					<image mode="widthFix" class="slide-image" :src="dataInfo.coverImage" @load="_imagesHeight" />
					<!-- </swiper-item> -->
				</swiper>
				<!-- <view class="silder_num">{{ imgCurrent + 1 }} / {{ detail.imgs.length }}</view> -->
			</view>
			<view class="title">
				{{ dataInfo.goodsName || '' }}
			</view>
			<view class="time"> 时间: {{ dataInfo.endTime || '' }} </view>
			<view class="tags"> 地址: {{ dataInfo.addressInfo || '' }} </view>
			<view class="des">
				<view class="des_left" @click="checkIdx = 'left'">
					<view class="des_label"> 作品简介 </view>
					<view class="line" v-if="checkIdx == 'left'"></view>
				</view>
				<view class="des_right" @click="checkIdx = 'right'">
					<view class="des_label"> 研学风采 </view>
					<view class="line" v-if="checkIdx == 'right'"></view>
				</view>
			</view>
			<view class="des_content" v-if="checkIdx == 'left'">
				<image
					mode="widthFix"
					class="slide-image"
					style="width: 100%"
					v-for="(t, idx) in dataInfo.detailImageList"
					:key="idx"
					:src="t"
					@load="_imagesHeight"
					@click="previewImage(t, 'detailImageList')"
				/>
				<!-- <view v-if="dataInfo.detailImageList.length == 0" style="text-align: center; width: 100%">暂无数据</view> -->
				<view v-if="dataInfo.detailImageList.length == 0" style="width: 100%; text-align: center; margin-top: 0rpx">
					<image
						style="width: 500rpx"
						mode="widthFix"
						src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/images/1734702481602ONCKpkWwYg0g4d9d4ebe77ff36c5ee1a1590746db1fb.png"
					/>
				</view>
			</view>
			<view class="swiper-item" v-if="checkIdx == 'right'">
				<view class="imgs">
					<view class="img" v-for="(img, idx) in dataInfo.imgList" :key="idx">
						<img v-if="img.type == 0" :src="img.imgPath" mode="aspectFill" @click="previewImage(img.imgPath, 'imgList')" />
						<video v-else :src="img.imgPath" />
					</view>
					<!-- <view v-if="dataInfo.imgList.length == 0" style="text-align: center; width: 100%">暂无数据</view> -->
					<view v-if="dataInfo.imgList.length == 0" style="width: 100%; text-align: center; margin-top: 0rpx">
						<image
							style="width: 500rpx"
							mode="widthFix"
							src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/images/1734702481602ONCKpkWwYg0g4d9d4ebe77ff36c5ee1a1590746db1fb.png"
						/>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import yanxueApi from '@/api/yanxue/yanxue'
export default {
	data() {
		return {
			windowWidth: 750,
			indicatorDots: false, // 是否显示面板指示点
			autoplay: true, // 是否自动切换
			duration: 800, // 滑动动画时长
			imgHeights: [], // 图片的高度
			imgCurrent: 0, // 当前banne所在滑块指针
			detail: {
				title: '大地艺术-自然共生',
				time: '2020-12-12',
				tags: '装置 绳索 无污染烟雾',
				imgs: [
					{ url: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/work_bg.png' },
					{ url: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/work_bg.png' },
					{ url: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/work_bg.png' },
					{ url: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/work_bg.png' },
					{ url: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/work_bg.png' },
					{ url: 'https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/work_bg.png' }
				],
				des: '大地艺术是一种以自然为材料，以自然为主题，以自然为载体，以自然为表现形式的艺术形式。它是一种以自然为材料，以自然为主题，以自然为载体，以自然为表现形式的艺术形式。它是一种以自然为材料，以自然为主题，以自然为载体，以自然为表现形式的艺术形式。它是一种以自然为材料，以自然为主题，以自然为载体，以自然为表现形式的艺术形式。'
			},
			dataInfo: { imgList: [], detailImageList: [] },
			checkIdx: 'left'
		}
	},
	onLoad(options) {
		this.getData(options.id)
	},
	methods: {
		previewImage(idx, key) {
			let list = key == 'imgList' ? this.dataInfo[key].map(x => x.imgPath) : this.dataInfo[key]
			uni.previewImage({
				current: idx, // 当前显示图片的索引
				urls: list // 需要预览的图片链接列表
			})
		},
		getData(id) {
			yanxueApi.getProjectedInfo({ id }).then(res => {
				console.log(res)
				this.dataInfo = res.result
			})
		},
		/**
		 * 计算图片高度
		 */
		_imagesHeight({ detail }) {
			const app = this
			// 获取图片真实宽度
			const { width, height } = detail
			// 宽高比
			const ratio = width / height
			console.log('ratio :>> ', ratio)
			// 计算的高度值
			const viewHeight = app.windowWidth / ratio
			// 把每一张图片的高度记录到数组里
			app.imgHeights.push(viewHeight)
			console.log('this.imgHeights :>> ', this.imgHeights)
		},

		/**
		 * 记录当前指针
		 */
		_bindChange(e) {
			this.imgCurrent = e.detail.current
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 22rpx 25rpx;
}

.detail {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 20rpx;
	.swiper-main {
		position: relative;
	}
	.silder_num {
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		width: 106rpx;
		height: 40rpx;
		background: #bbbbbb;
		border-radius: 20rpx;
		opacity: 0.7;
		font-family: HarmonyOS Sans SC;
		font-size: 30rpx;
		color: #fefefe;
		text-align: center;
	}
	.swiper-box {
		width: 100%;
		height: 400rpx;

		.slide-image {
			width: 700rpx;
			height: 100% !important;
		}
	}

	.title {
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 36rpx;
		color: #000000;
		margin-top: 66rpx;
		display: flex;
		align-items: center;
	}

	.title::before {
		content: '';
		display: block;
		width: 6rpx;
		height: 40rpx;
		background-color: #ffc600;
		margin-right: 22rpx;
	}

	.time {
		font-family: HarmonyOS Sans SC;
		font-size: 24rpx;
		color: #4e4e4e;
		margin-top: 38rpx;
	}

	.tags {
		font-family: HarmonyOS Sans SC;
		font-size: 24rpx;
		color: #4e4e4e;
		margin-top: 36rpx;
	}

	.des {
		margin-top: 20rpx;
		// text-align: center;
		display: flex;
		padding: 30rpx;
		justify-content: space-between;
		.des_left,
		.des_right {
			width: 47%;
			text-align: center;
		}
		.des_label {
			font-family: HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 34rpx;
			color: #000000;
			margin-top: 118rpx;
			display: inline-block;
		}
		.line {
			// width: 342rpx;
			width: 100%;
			height: 6rpx;
			background: #f95513;
			border-radius: 3rpx;
			margin: 0 auto;
			margin-top: 26rpx;
		}
	}
	.des_content {
		// width: 624rpx;
		font-family: HarmonyOS Sans SC;
		font-size: 24rpx;
		color: #000000;
		line-height: 50rpx;
		margin: 0 auto;
		// margin-top: 40rpx;
	}
	.swiper-item {
		// padding: 0 12px;
		box-sizing: border-box;
		.imgs {
			display: flex;
			flex-wrap: wrap;
			row-gap: 7px;
			column-gap: 7px;
			.img {
				width: 167px;
				height: 97.5px;
				img {
					width: 171.5px;
					height: 97.5px;
					object-fit: cover;
				}
				video {
					width: 171.5px;
					height: 97.5px;
					object-fit: cover;
				}
			}
		}
	}
}
</style>
